<template>
  <view class="container">
    <view class="top-bg"></view>
    <view class="box">
      <!-- 头像 -->
      <view class="head-box">
        <view class="avatar">
          <image class="head-img" src="../static/logo.png"></image>
        </view>
        <view class="tip"></view>
      </view>
      <!-- 第一部分列表 -->
      <view>
        <button class="row" style="width: 100%;" data-target="page2" @click="goTo">
          <view class="left">
            <icon class="icon-small" type="success" size="16"></icon>
            <text class="text">个人信息管理</text>
          </view>
          <view class="right">》</view>
        </button>
        <button class="row" style="width: 100%;" data-target="page4" @click="goTo">
          <view class="left">
            <icon class="icon-small" type="success" size="16"></icon>
            <text class="text">提供商品</text>
          </view>
          <view class="right">》</view>
        </button>
        <button class="row" style="width: 100%;border-bottom: none;" data-target="page3" @click="goTo">
          <view class="left">
            <icon class="icon-small" type="success" size="16"></icon>
            <text class="text">订单查看</text>
          </view>
          <view class="right">》</view>
        </button>
      </view>
    </view>
    <!-- 第二部分列表 -->
    <view class="end">
      <button class="row" style="width: 100%;" data-target="page5" @click="goTo">
        <view class="left">
          <icon class="icon-small" type="success" size="16"></icon>
          <text class="text">商品信息</text>
        </view>
        <view class="right">》</view>
      </button>
    </view>
    <!-- 第三部分列表 -->
    <view class="end1">
      <view class="left">
        <text class="text1" data-target="page1" @click="goTo">退出登录</text>
      </view>
    </view>
    <view class="footer">
      <text>欢迎您的使用！</text>
    </view>

  </view>
</template>

<script>
  import store from '../../store/index.js' //需要引入store
  export default {
    data() {
      return { src: '' }
    },

    methods: {
      goTo(event) {
        const target = event.currentTarget.dataset.target
        if (target === 'page1') {
          uni.redirectTo({ url: '/pages/busiLogin/busiLogin' })
        } else if (target === 'page2') {
          uni.navigateTo({ url: '/subpkg/busin/B-Info/B-Info' })
        } else if (target === 'page3') {
          uni.navigateTo({ url: '/subpkg/busin/B-Money/B-Money' })
        } else if (target === 'page4') {
          uni.navigateTo({ url: '/subpkg/busin/B-Orders/B-Orders' })
        } else if (target === 'page5') {
          uni.navigateTo({ url: '/subpkg/busin/B-Details/B-Details' })
        }
      },
      basicClick() {
        console.log('基本信息监听')
      },
      // 匿名反馈
      feedbackClick() {
        console.log('匿名反馈监听')
      },
      // 关于我们
      aboutClick() {
        console.log('关于我们监听')
      },
    },
    onLoad() {
      uni.hideHomeButton()
      // https://pic.imgdb.cn/item/648bb37f1ddac507cc4270e1.webp
      if (store.state.business.B_Image === '') {
        this.src = 'https://pic.imgdb.cn/item/648bb37f1ddac507cc4270e1.webp'
      } else {
        this.src = store.state.business.B_Image
      }
    }
  }
</script>

<style>
  page {
    background-color: #f1f1f1;
  }

  /* 设置背景颜色 */
  .top-bg {
    height: 260rpx;
    background-color: rgb(28, 42, 134);
  }

  /* 圆角盒子 */
  .box {
    background-color: white;
    margin-top: -120rpx;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    padding: 0 20rpx;
  }

  /* 头像部分 */
  .head-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1rpx solid #fbdbdc;
    padding-bottom: 20rpx;
  }

  .avatar {
    margin-top: -80rpx;
    font-weight: inherit;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0);
  }


  .head-img {
    width: 140rpx;
    height: 140rpx;
    overflow: hidden;
    border-radius: 55%;
    background-color: #fbdbdc;
  }

  .tip {
    font-size: 26rpx;
    color: gray;
    margin: 15rpx 0;
  }

  /* 列表部分 */
  .row {
    display: flex;
    align-items: center;
    padding: 36rpx 10rpx;
    font-size: 30rpx;
    font-weight: inherit;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1rpx solid #fbdbdc;
  }

  .row::after {
    border: none;
  }

  .text {
    margin-left: 15rpx;
    color: #636262;
  }

  .left {
    width: 90%;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .right {
    width: 10%;
    text-align: right;
    color: rgb(148, 147, 147);
  }

  .end {
    background-color: white;
    margin-top: 20rpx;
    padding: 0 20rpx;
  }

  .end1 {
    background-color: rgb(28, 42, 134);
    margin-top: 20rpx;
    padding: 0 20rpx;
    height: 50px;
  }

  .text1 {
    margin-left: 260rpx;
    margin-top: 35rpx;
    color: white;
  }

  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;
    font-size: 22rpx;
    margin: 30rpx 0;
    color: gray;
  }
</style>